<template>
  <div>
    <!-- 首页内容显示出来的前提是当前路由是 /home -->
    <transition name="myfade">
      <div v-show="$route.fullPath == '/home'">
        <van-search
          v-model="inputValue"
          @click="showPopup"
          readonly
          placeholder="请输入搜索关键词"
        />
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="skyblue">
          <van-swipe-item v-for="item in banner" :key="item.id">
            <img v-lazy="item.image_url" width="100%" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </transition>

    <!-- 
        在父级路由组件中如何去显示子路由对应的组件,要是用<router-view />
     -->
    <transition name="fade">
      <div class="mymodal" v-show="$route.fullPath == '/home/popup'"></div>
    </transition>
    <transition name="slide">
      <router-view />
    </transition>
  </div>
</template>
<script>
import { HomeApi } from "../request/api";
export default {
  data() {
    return {
      inputValue: "",
      banner: [],
    };
  },
  created() {
    HomeApi().then((res) => {
      if (res.errno == 0) {
        let { banner } = res.data; // 从一个对象中解构一个字段出来
        this.banner = banner;
      }
    });
  },
  methods: {
    // 显示popup
    showPopup() {
      this.$router.push("/home/popup");
      // 当路径变成了 /home/popup 的时候,透明层就过渡为黑色
    },
  },
};
</script>
 
<style lang = "less" scoped>
.my-swipe {
  height: calc(400 * 100vw / 750); // 一元一次方程
  img {
    display: block;
  }
}

// 淡入的起始状态与淡出的最终状态一样  opacity: 0;
// 淡入的最终状态与淡出的起始状态一样  opacity: 1;

.mymodal {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: #000;
}

/* 右侧滑动进入 -- start */
.slide-enter,
.slide-leave-to {
  right: -100%;
}
.slide-enter-active,
.slide-leave-active {
  transition: right 0.5s linear;
}
.slide-enter-to,
.slide-leave {
  right: 0;
}
/* 右侧滑动进入 -- end */

/* 淡入淡出进入 -- start */
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s linear;
}
.fade-enter-to,
.fade-leave {
  opacity: 1;
}
/* 淡入淡出进入 -- end */

/* 首页内容的淡入淡出 -- start */
.myfade-enter,
.myfade-leave-to {
  opacity: 0;
}
.myfade-enter-active,
.myfade-leave-active {
  transition: opacity 0.7s linear;
}
.myfade-enter-to,
.myfade-leave {
  opacity: 1;
}

/* 首页内容的淡入淡出 -- end */
</style>